<template>
    <el-dialog v-model="visible" @closed="closed" @open="loadEvectionDetail" width="70%" :show-close="false" custom-class="el-dialog1">
        <el-table :data="nodeData">
            <el-table-column label="节点名称" prop="nodeName" width="140px"/>
            <el-table-column label="审批人员" prop="assigneeName" width="90px"/>
            <el-table-column label="审批结果" width="90px">
                <template #default="s">
                    <el-tag type="success" v-if="s.row.approved">通过</el-tag>
                    <el-tag type="danger" v-if="s.row.approved===false">未通过</el-tag>
                    <el-tag type="info" v-if="s.row.approved===null">审批中</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="startTime"/>
            <el-table-column label="完成时间" prop="endTime"/>
            <el-table-column label="耗时">
                <template #default="s">
                    {{showDuration(s.row.duration)}}
                </template>
            </el-table-column>
            <el-table-column label="回复" prop="reply"/>
        </el-table>
        <template #footer>
            <el-button @click="visible=false">关闭</el-button>
        </template>
    </el-dialog>
</template>

<script>
import {lookEvectionDetail} from "../../../../network/process/evection-process";

export default {
    name: "EvectionApplyDetail",
    data(){
        return{
            visible: false,
            processInstanceId: null,
            nodeData: []
        }
    },
    methods: {
        closed(){
            Object.assign(this.$data,this.$options.data.call(this))
        },
        showDuration(duration){
            return this.$utils.getDuration(duration);
        },
        loadEvectionDetail(){
            lookEvectionDetail(this.processInstanceId).then(vo=>{
                this.$response.handle({
                    data: vo,
                    successFn: ()=>{
                        this.nodeData = vo.data;
                    },
                    log: '流程实例详情'
                })
            })
            // console.log('processInstanceId',this.processInstanceId)
        }
    },
    // watch:{
    //     processInstanceId(){
    //
    //         this.loadEvectionDetail();
    //     }
    // }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
</style>
<style>
.el-dialog1 .el-dialog__header{
    padding: 0;
}
.el-dialog1 .el-dialog__body{
    padding-bottom: 0;
}
</style>